<template>
  <div class="category">
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 视图 -->
    <el-card >
      <el-row>
        <el-col>
         <el-button type='primary' @click="addcatedialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
     <tree-table class="treetable" :data="catelist" :columns="columns" :selection-type='false' :expand-type='false' show-index index-text='#' border stripe :show-row-hover='false'> 
       <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color:lightgreen;"></i>
          <i class="el-icon-error" v-else style="color:red;"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag  v-if="scope.row.cat_level==0" style="color:lightgreen;" size='mini'>一级</el-tag>
         <el-tag   type='success' v-else-if="scope.row.cat_level==1" style="color:lightgreen;" size='mini'>二级</el-tag>
         <el-tag  v-else style="color:lightgreen;" type='warning' size='mini'>三级</el-tag>
        </template>
        <!-- 操作 -->
         <template slot="opt" slot-scope="scope">
          <el-button  type='primary' icon='el-icon-edit' size='mini' @click="handleedit(scope.row)">编辑</el-button>
         <el-button  type='danger' icon='el-icon-delete' size='mini'>删除</el-button>
        </template>
     </tree-table>
      <!-- 分页区 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryparams.pagenum" :page-sizes="[3, 5, 10,15]" :page-size="queryparams.pagesize"  layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog title="添加分类" :visible.sync="catedialogVisible" width="50%"  @close='closedialog'>
      <!-- 添加分类表单 -->
          <el-form :model="addcateruleForm" :rules="addcaterules" ref="addcaterule" label-width="100px">
             <el-form-item label="分类名称：" prop="cat_name">
             <el-input v-model="addcateruleForm.cat_name"></el-input>
             </el-form-item>
              <el-form-item label="父级分类：">
                <!-- options指定数据源 props是配置对象 v-model必须绑定数组-->
                <el-cascader v-model="selectvalue" :options="parentlist" :props="cascaderProps" @change="selectparenthandleChange" clearable  style="width:100%">
                </el-cascader>
             </el-form-item>
          </el-form >
           <span slot="footer" class="dialog-footer">
           <el-button @click="catedialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="addcatedia">确 定</el-button>
           </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      catelist:[],//商品分类
      queryparams:{//查询参数
        type:3,
        pagenum:1,
        pagesize:5
      },
      total:0,
      columns: [
          {
            label: '分类名称',
            prop: 'cat_name',
          },
          {
            label: '是否有效',
            prop: 'cat_deleted',
            type: 'template',//模版列
            template: 'isok',//当前列的模版名称
          },
             {
            label: '排序',
            type: 'template',//模版列
            template: 'order',//当前列的模版名称
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt',
          },
        ],
        catedialogVisible:false,//控制添加对话框的显示隐藏
        addcateruleForm:{
               cat_name:'',
               cat_pid:0, //父级id
               cat_level:0//等级
        },//添加分类的对象
        addcaterules:{
          cat_name:[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
        },//校验规则
        parentlist:[],//父级分类列表
        cascaderProps:{
             value:'cat_id',
             label:'cat_name',
             children:'children',
             expandTrigger:'hover',
             checkStrictly:true
        },//级联选择器的配置对象
        selectvalue:[],//选中的父级分类数组
    }
  },
  created(){
    this.getcatelist()
  },
  methods:{
    //商品分类
   async getcatelist(){
   let {data: res} = await this.$http.get('categories',{params:this.queryparams})
   if (res.meta.status!=200) return this.$message.error('获取商品分类失败')
      this.catelist = res.data.result
      this.total = res.data.total
       //console.log(res)
    },
    handleedit(row){
       //编辑
    },
      /* 页size改变 */
  handleSizeChange(newpagesize){
   this.queryparams.pagesize = newpagesize
   this.getcatelist()
  },
  /* 页码改变 */
  handleCurrentChange(newpage){
  this.queryparams.pagenum = newpage
  this.getcatelist()
  },
  /* 显示添加分类对话框 */
     addcatedialog(){
       //先获取父级数据
       this.getparentcategories()
       this.catedialogVisible=true
     },
     async getparentcategories(){
      let {data:res}= await this.$http.get('categories',{params:{type:2}})
      if (res.meta.status!==200) return this.$message.error('获取父级数据失败')
      this.parentlist = res.data
      //console.log(res.data)
     },
     /* 选择发生变化触发 */
     selectparenthandleChange(){
         console.log(this.selectvalue)
         //length>0证明选择了父级  否则就没有
         if (this.selectvalue.length>0) {
           let len=this.selectvalue.length
           // 父级分类的Id
           this.addcateruleForm.cat_pid = this.selectvalue[len-1]
            // 为当前分类的等级赋值
           this.addcateruleForm.cat_level = len
            return
         }else{
           // 父级分类的Id
           this.addcateruleForm.cat_pid = 0
            // 为当前分类的等级赋值
           this.addcateruleForm.cat_level = 0
         }
     },
     /* 点击按钮添加分类 */
    addcatedia(){
       //console.log(this.addcateruleForm)
       this.$refs.addcaterule.validate( async valid=>{
         //console.log('1')
         if (!valid) return
         let {data:res}=await this.$http.post('categories',this.addcateruleForm)
         if (res.meta.status!==201) return this.$message.error('添加分类失败')

         this.$message.success('添加分类成功')
         this.getcatelist()
         this.catedialogVisible = false
       })
     },
     /* 对话框关闭 重置表单数据 */
     closedialog(){
       this.$refs.addcaterule.resetFields()
       this.addcateruleForm.cat_pid = 0
       this.addcateruleForm.cat_level = 0
       this.selectvalue = []
     }

  },


}
</script>

<style lang="less" scoped>
.treetable{
margin-top: 15px;
}
</style>